<template>
  <header class="containtBox">
    <div class="g-header clearfix" :style="{background:transparency}">
        <div class="container">
            <div class="logo pull-left">
                <a href="#" title="">
                    <img src="../assets/img/logo.png" alt="">
                </a>
            </div>
            <div class="cart">
            <!--     <a href="home.html" title="">
                    <img src="../assets/img/shop.png" alt="">
                </a>   -->            
            </div>
            <div class="nav-button button-toggle" @click='mobileEnd'></div>
            <div class="nav-box pull-right J-indexNav">
                <div class="close" @click='closeMobileEnd'></div>
                <ul class="nav">
                    <li class="nav-item" @click="addClass($event,0)" v-bind:class="{active:current==0}">
                        <router-link  :to="{ name: 'index'}">{{$t('header.index')}}</router-link>
                    </li>
                    <li class="nav-item" @click="addClass($event,1)" v-bind:class="{active:current==1}">
                        <router-link  :to="{ name: 'home'}">{{$t('header.news')}}</router-link>
                    </li>
                    <li class="nav-item"  @click="addClass($event,2)" v-bind:class="{active:current==2}">
                        <router-link  :to="{ name: 'product'}">{{$t('header.product')}}</router-link>
                    </li> 
                    <li class="nav-item"  @click="addClass($event,3)" v-bind:class="{active:current==3}">
                        <router-link  :to="{ name: 'features'}">{{$t('header.features')}}</router-link>
                    </li> 
                    <li class="nav-item" @click="externalLink">{{$t('header.animal')}}</li>  
                    <li class="nav-item mobileEnd"  @click="addClass($event,4)" v-bind:class="{active:current==4}">
                        <router-link  :to="{ name: 'aboutUs'}">{{$t('header.about')}}</router-link>
                    </li>  
                    <li class="nav-item mobileEnd" @click="addClass($event,5)" v-bind:class="{active:current==5}">
                        <router-link  :to="{ name: 'contactUs'}">{{$t('header.contact')}}</router-link>
                    </li>  
                    <li class="nav-item mobileEnd" @click="addClass($event,6)" v-bind:class="{active:current==6}">
                        <router-link  :to="{ name: 'retail'}">{{$t('header.retail')}}</router-link>
                    </li> 
<!--                      <li v-for="(item,index)  in tabList" :index="index" v-on:click="addClass(index)" v-bind:class="[{active:index==current},{mobileEnd:index>=4}]" >
                         <a  @click="externalLink" v-if="index == 3">{{item.title}}</a>
                         <router-link  :to="{name:item.name}" v-else>{{item.title}}</router-link>
                     </li> -->
                    <li class="nav-item" >
                        <select v-model="couponSelected"  v-on:change="changeLanguage($event)">
                            <option v-for="item in language" v-bind:value="item.value" v-bind:lang="item.lang">
                                {{item.name}}
                            </option>
                        </select>
                    </li>
                </ul>
            </div>
        </div>
    </div>      
  </header>
  <!-- <router-link  :to="{path:'/buy',query: {id: 0}}">购买</router-link> -->
</template>
<script>
export default {
  name: 'containtBox',
  props:['transparency'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      type:0,
      current:0,
      couponSelected: '',
      language:[
        {name:'ENGLISH',value:0,lang:'en'},
        {name:'中文简体',value:1,lang:'zh-CN'},
        {name:'中文繁體',value:2,lang:'zh-TW'}
      ]
    }
  },
  methods: {
     changeLanguage (event) {
        if(event.target.value == 0){
            this.$i18n.locale = 'en';
            localStorage.setItem('lang',"en");
            this.$options.methods.choonseLang('en');
        }else if(event.target.value == 1){
            this.$i18n.locale = 'zh-CN';
            localStorage.setItem('lang',"zh-CN");
            this.$options.methods.choonseLang('zh-CN');
        }else{
            this.$i18n.locale = 'zh-TW';
            localStorage.setItem('lang',"zh-TW");
            this.$options.methods.choonseLang('zh-TW');
        };
      },
      choonseLang(lang){
          axios.get('/api/setLocale?lang='+lang)
          .then(function (response) {
             console.log(JSON.stringify(response));
             window.location.reload();
          })
          .catch(function (error) {
              console.log(JSON.stringify(error));
          })         
      },
      /*切换更换头部样式*/
      addClass: function(event,status) {
          localStorage.setItem('current',status);
          this.current = status;
          //console.log(document.body.clientWidth);
          if(document.body.clientWidth<=768){
             this.$options.methods.closeMobileEnd();
          }
      },
      externalLink(){
         window.location.href="https://www.wennoanimal.com/animals";
      },
      /*屏幕改变*/
      mobileEnd (){
          var $navButton = $('.nav-button');
          var $navBox = $('.nav-box');
          $navButton.hide();
          $navBox.slideDown();
      },
      closeMobileEnd () {
          var $navButton = $('.nav-button');
          var $navBox = $('.nav-box');
          $navBox.slideUp(function() {
            $navButton.show()
          });
      },
      dataRender () {
         console.log(this.transparency);
         if(this.transparency==="rgba(255,255,255,0)"){
             this.type = 1; 
         }else{
             this.type = 0; 
         }
      }
  },
  mounted:function(){
      let _this=this;
      $(window).scroll(function () {
          var scrollValue = $(window).scrollTop();
          if(scrollValue>=50){
             $(".g-header").attr('style','background:rgba(255,255,255,1)');
          }else{
            if (_this.type==1) {
               $(".g-header").attr('style','background:rgba(255,255,255,0)');
            }else{
              return;
            }
          }
      });
  },
  created:function () {
    console.log(localStorage.getItem('current'));
    this.current = localStorage.getItem('current');
    if(this.$i18n.locale=='en'){
        this.couponSelected = 0;
    }else if(this.$i18n.locale=='zh-CN'){
        this.couponSelected = 1;
    }else{
        this.couponSelected = 2;
    }
    this.dataRender();
  }
}
</script>
<style scoped>
 .g-header {
    position: fixed;
    z-index: 101;
    top: 0;
    right: 0;
    left: 0;
    width:100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
}   
.nav-item select{padding:0.3rem 1.4rem 0.3rem 0.3rem;border-radius:0.3rem;color:#fff;font-size:0.67rem;text-align:left;background:#7b5c55 url(../assets/img/dropDown.png) 93% 50% no-repeat;background-size:8px 5px;}

</style>